<!DOCTYPE html>
<html>
<head>
	<title>Canvas clock</title>
</head>
<body>

<canvas id="canvas" width=400 height=400>
	
</canvas>

<script type="text/javascript">

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    var MARGIN = 60,
        RADIUS = canvas.width/2 - MARGIN,
        HANDRADIUS = RADIUS + 28,
        FONT_HEIGHT = 24;

    function drawCircle(){
        context.beginPath();
        context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);
        context.stroke();
    }

    function drawNumericals(){
        var numerials = [1,2,3,4,5,6,7,8,9,10,11,12];

        numerials.forEach(function(val){
            angle = Math.PI/6*(val - 3);
            numeralWidth = context.measureText(val).width;
            context.fillText(val, canvas.width/2+Math.cos(angle)*HANDRADIUS, canvas.height/2+Math.sin(angle)*HANDRADIUS+FONT_HEIGHT/3)
        })
    }

    function drawCenter(){
        context.beginPath();
        context.arc(canvas.width/2, canvas.height/2,5,0,Math.PI*2, true);
        context.fill();
    }

    function drawHand(time, factor){
        var angle = (Math.PI*2)*(time/60)-Math.PI/2
        context.beginPath();
        context.moveTo(canvas.width/2, canvas.height/2);
        context.lineTo(canvas.width/2 + Math.cos(angle)*RADIUS*factor, canvas.height/2 + Math.sin(angle)*RADIUS*factor);
        context.stroke();
    }

    function drawHands(){
        var now = new Date(),
            hour = now.getHours();
        hour = hour>12 ? hour-12:hour;

        drawHand(hour*5, .7) // hour
        drawHand(now.getMinutes(), .8) // min
        drawHand(now.getSeconds(), .9) // second
    }

    function drawClock(){
        context.clearRect(0,0,canvas.width, canvas.height);

        drawCircle();
        drawNumericals();
        drawCenter();
        drawHands();
    }

    context.font = FONT_HEIGHT + "px yahei";

    function animate(time){

        drawClock();

        requestAnimationFrame(animate);
    }


    requestAnimationFrame(animate); 



</script>

</body>
</html>